<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字</title>
</head>
<body>
    <button id="reset">重新开始</button><br/>
    <span>请输入要猜的数字：</span><input type="text" name="guestNum" id="guestNum"><button id="guest">猜</button><br/>
    <span>已经猜的次数：</span><span id="count"></span><br/>
    <span>结果:</span><span id="result"></span>

    <script src="../js/jquery.js"></script>
    <script>
        //生成随机数
        let num = Math.floor(Math.random()*100)+1;//1~100
        console.log(num);
        
        let count = 0;

        $('#reset').click(
            function(){
                num = Math.floor(Math.random()*100)+1;//1~100
                console.log(num);
                count  = 0;
                $('#guestNum').val("");
                $('#count').text(count);
                $('#result').text("");
            }
        );
        $('#guest').click(
            function(){
                let guestNumber = $('#guestNum').val();
                count++;
                $('#count').text(count);
                if(num < guestNumber){
                    $('#result').text("猜大了");
                    $('#result').css("color","red");
                }else if(num > guestNumber){
                    $('#result').text("猜小了");
                    $('#result').css("color","red");
                }else{
                    $('#result').text("猜对了");
                    $('#result').css("color","green");
                }
            }
        );
    </script>
</body>
</html>